Eu sou uma caixa!

Exercícios (alguns)

Exercício 1❑

Fora de um parágrafo

Nesse exercício, vamos usar o html do site de um restaurante que está sem nenhum estilo. Pouco a pouco, vamos deixá-lo apresentável. Para resolvê-lo, utilize esse▻ arquivo.

Uma planta vinda da internet

1.1 Comece estilizando os hyperlinks da página: escolha outra cor, que não azul para eles, e remova o sublinhado. Que seletor você usou para fazer essa modificação? Altere somente o CSS para resolver essa etapa.

1.2 A primeira imagem é uma imagem de “capa” do site. Ela deve ocupar mais espaço horizontal que as outras, mas nunca ultrapassando os limites da página. Para resolver essa etapa, você pode alterar o CSS e o HTML. Que seletores você usou?

1.3 Depois de cada imagem há uma legenda. Sem editar o HTML, estilize essas legendas, alterando o tamanho de fonte e a própria fonte. Que seletores e combinadores você utilizou?

1.4 Alguns dos links estilizados no item 1.1 (“About”, “Contact” e “Menu”) funcionam como botões: Queremos que a cor de fundo deles se altere quando passamos com o mouse em cima deles ou quando eles estão ativos.

1.5. Iluminuras

1.5.1 Use somente CSS para criar iluminuras em todos os parágrafos (isto é, estilize a primeira letra de cada parágrafo). Para criar a iluminura, pode ser legal trocar a fonte, colocar uma cor de fundo, uma borda, estilizar a borda, etc.

1.5.2 Uma iluminura geralmente não aparece em todos os parágrafos, mas sim no primeiro de alguma seção. Sem alterar o HTML, modifique o item anterior para que a iluminura só apareça no primeiro parágrafo de uma seção.

1.6 Na lista de bebidas, altere a cor da pimeira, última e quinta bebida.

1.7 Suponha quer queiramos avisar aos clientes quais pratos são veganos e quais não são. É comum colocar a imagem de uma planta ao lado dos pratos que são veganos. Para isso, encontre uma imagem de planta na internet adequada, e utilize pseudo-elementos para inserir essa imagem após os itens veganos. Você deve usar HTML para indicar quais pratos são veganos e quais não são, mas você não deve inserir a imagem direto no HTML!

Exercício 2: Cascata, especificidade e herança✛

Inspirado nesse artigo.

2.1 Considere o seguinte código:

<ul class="main">
    <li>Item One</li>
    <li>Item Two
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>Item Three
        <ul class="special">
            <li>3.1
                <ul>
                    <li>3.1.1</li>
                    <li>3.1.2</li>
                </ul>
            </li>
            <li>3.2</li>
        </ul>
    </li>
</ul>

.main {
 color: orange;
 border: 2px solid #ccc;
 padding: 1em;
}

.special {
 color: black;
 font-weight: bold;
 border: 1px solid #fc9;
}

2.1.1 Que parte do html terá fonte com cor laranja, e que parte terá fonte de cor preta?

2.1.2 Das propriedades atribuídas no trecho CSS quais são herdadas e quais não são?

2.2 Considere o seguinte código:

<ul>
    <li>Default <a href="#">link</a> color</li>
    <li class="class-1">Inherit the <a href="#">link</a> color</li>
    <li class="class-2">Reset the <a href="#">link</a> color</li>
    <li class="class-3">Unset the <a href="#">link</a> color</li>
</ul>

body {
 color: green;
}

2.2.1 Complete o CSS de modo que o link de class-1 tenha color: inherit, o link de class-2 tenha color: initial e o link de class-3 tenha color: unset. O que vai acontecer em cada um dos casos? Procure responder antes de implementar.

2.2.1 O que a regra .my-class-1 a está fazendo? Ela tem efeito, visto que a cor já é uma propriedade herdada?

2.2.2 Sabemos que se usarmos um link sem nenhum estilo, ele aparece azul. Porque ao usarmos o valor initial, o link fica preto, e não azul? Que valor teríamos que usar para deixar o link da mesma cor que ele ficaria se não fosse estilizado?

2.3 Considere os seguintes códigos:

/* 1. */
#outer a {
 background-color: red;
}

/* 2. */
#outer #inner a {
 background-color: blue;
}

/* 3. */
#outer div ul li a {
 color: yellow;
}

/* 4. */
#outer div ul .nav a {
 color: white;
}

/* 5. */
div div li:nth-child(2) a:hover {
 border: 10px solid black;
}

/* 6. */
div li:nth-child(2) a:hover {
 border: 10px dashed black;
}

/* 7. */
div div .nav:nth-child(2) a:hover {
 border: 10px double black;
}

a {
 display: inline-block;
 line-height: 40px;
 font-size: 20px;
 text-decoration: none;
 text-align: center;
 width: 200px;
 margin-bottom: 10px;
}

ul {
 padding: 0;
}

li {
 list-style-type: none;
}

2.3.1 Dê a nota de especificidade para cada uma das 7 regras numeradas.

2.3.2 Que regras estão competindo para definir a cor de fundo para links (<a>)? Explique qual está “ganhando” e por quê.

2.3.3 Repita o exercício anterior, mas agora para a cor do texto.

2.3.4 Repita o exercício anterior, mas agora para a cor do texto.

2.3.5 Quais regras estão competindo para definir o estilo da borda para os links (<a>)? Qual está ganhando para o primeiro link, e qual está ganhando para o segundo? Porque?

2.3.6 Escreva uma regra que, se usada na sequência do código CSS apresentado, vai estilizar a borda do primeiro link, mas não do segundo.

▤    meta

◧